<template>
    <div class="app-container customer-div">
      <!--新增编辑续签合同-->
      <el-dialog
        :close-on-click-modal="false"
        title="合同记录"
        :visible.sync="dialogVisible"
        width="440px">
        <el-form :model="htForm" size="mini" label-width="120px" ref="htForm" :rules="rules">
          <el-form-item label="员工姓名：" prop="userId" v-if="source=='list'">
            <el-select v-model="htForm.userId" filterable placeholder="请选择"  :disabled="popType != 'add'">
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同类型：" prop="type">
            <el-select v-model="htForm.type">
              <el-option label="实习协议" :value="2"></el-option>
              <el-option label="固定期合同"  :value="1"></el-option>
              <el-option label="其它"  :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同公司："  prop="contractCompany">
            <el-input v-model="htForm.contractCompany"></el-input>
          </el-form-item>
          <el-form-item label="合同编号：" prop="number">
            <el-input v-model="htForm.number"></el-input>
          </el-form-item>
          <el-form-item label="合同开始时间：" prop="startTime">
            <el-date-picker
              style="width:100%"
              v-model="htForm.startTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同期限："  prop="term">
            <el-input-number :precision="0" v-model="htForm.term"></el-input-number><span style="padding-left:10px">月</span>
          </el-form-item>
          <el-form-item label="合同签订日期：" prop="createTime">
            <el-date-picker
              style="width:100%"
              v-model="htForm.createTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="附件：">
            <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in htForm.url">
              <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
              <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
            </div>
            <el-upload
              v-if="htForm.url.length<5"
              class="avatar-uploader"
              :data="uploadToken"
              action="https://upload.qiniup.com"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>
    import {addContract,updateContract} from '@/api/company'
    import {getOrderUsersList,getQiniuToken} from '@/api/partner'
    const defaulthtForm={
      "userId": '',										//用户id
      "number": '',										//合同编号
      "contractCompany": "",								//合同公司
      "term": '',											//合同期限
      "type": '',											//合同类型：1固定合同 2实习协议 其它
      "url": [],								//附件地址
      "startTime": "",							//合同开始时间
      "createTime": "",							//合同签订时间
    };
    export default {
        name: "gtpop",
        data(){

            return {
              dialogVisible:false,
              htForm:JSON.parse(JSON.stringify(defaulthtForm)),
              rules:{
                userId:[{required: true, message: '此项必填', trigger: 'change'},],
                number:[{required: true, message: '此项必填', trigger: 'blur'},],
                contractCompany:[{required: true, message: '此项必填', trigger: 'blur'},],
                term:[{required: true, message: '此项必填', trigger: 'blur'},],
                type:[{required: true, message: '此项必填', trigger: 'change'},],
                startTime:[{required: true, message: '此项必填', trigger: 'blur'},],
                createTime:[{required: true, message: '此项必填', trigger: 'blur'},],
              },
              btnLoading:false,

              uploadToken:{
                token:'',
              },
              imgDomain:'',
              popType:'',
              userOptionList:[],
              source:''
            }
        },
        computed: {

        },
        components : {

        },
        created() {
          this.getUserOptionList();
        },
        methods:{
          //获取七牛TOKEN
          getUploadToken(){
            getQiniuToken().then((res)=>{
              this.uploadToken.token = res.token;
              this.imgDomain = res.domain
            })
          },
          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
              this.userOptionList = res;
            })
          },
          //上传图片
          handleAvatarSuccess(res){
            this.htForm.url.push(this.imgDomain+res.key)

          },

          //删除图片
          delImg(index){
            this.htForm.url.splice(index,1)
          },

          //显示新增/编辑沟通记录
          showPop(type,item,source){
            this.popType = type
            this.source = source;
            if(type == 'add'){
              this.htForm = JSON.parse(JSON.stringify(defaulthtForm))
            }else{
              this.htForm = JSON.parse(JSON.stringify(item))
            }
            this.htForm.userId = item.userId
            this.getUploadToken();
            this.dialogVisible = true;
          },


          //关闭弹窗
          handleClose(){
            this.dialogVisible = false;
            this.$refs.htForm.clearValidate();
          },

          //提交
          handleConfirm(){
            this.$refs.htForm.validate((valid) => {
              if (valid) {
                this.btnLoading = true;
                let data = JSON.parse(JSON.stringify(this.htForm));
                let fn
                if(this.popType == 'edit'){
                  fn = updateContract
                }else{
                  fn = addContract
                }
                fn(data).then(()=>{
                  this.btnLoading = false;
                  this.handleClose();
                  this.$emit('getcontractList')
                }).catch(()=>{
                  this.btnLoading = false;
                })
              }
            })
          },

        },
    }
</script>

<style scoped lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
}
.upload-div{
  text-align: center;
  position:relative;
  #upload{

    opacity: 0;
    position: absolute;
    z-index: 1;
    width:154px;
    height:40px
  }
}
</style>
